<template>
    <div class="inlistbox">
        <div class="list-tools" v-if="!hideTool">
            <div class="list-tools-form" style="position:relative">
                <el-button type="default" size="mini" icon="el-icon-refresh" @click.stop="fetchData"></el-button>
                <slot name="search"></slot>
                <template v-if="!hidSearch">
                <el-input
                        v-model="filter.keyword"
                        placeholder="关键字"
                        size="mini"
                        class="keyword"
                        style="width: 280px;"
                        v-show="searchOpen"
                >
                    <el-select
                            v-model="filter.search_type"
                            slot="prepend"
                            style="width: 100px;"
                            placeholder="搜索类型 "
                            v-if="stype && stype.length > 0"
                    >
                        <el-option
                                v-for="(item,index) in stype"
                                :key="index"
                                :value="item.key"
                                :label="item.value"
                        ></el-option>
                    </el-select>
                    <el-button icon="el-icon-search" slot="append" @click.stop="search"></el-button>
                </el-input>
                <el-button
                        :icon="searchOpen?'el-icon-close':'el-icon-search'"
                        @click="searchOpen=!searchOpen"
                        size="mini"
                        style="padding:9px 15px;"
                        round
                ></el-button>
            </template>
            </div>
        </div>
        <!-- table list -->
        <div :class="cards ? 'cards list-body' : 'list-body'">
            <v-loading v-if="loadingStatus"></v-loading>
            <table ref="tableHead" class="table table-list" :style="loadingStatus ? 'opacity: .1' : ''">
                <colgroup v-if="cols">
                    <template v-for="col in cols.split(',')">
                        <col v-if="col > 0" :width="col + 'px'" />
                        <col v-else />
                    </template>
                </colgroup>
                <slot name="head" :filter="filter" :data="data.list"></slot>
                <tbody>
                <slot name="item" v-for="item in data.list" :item="item" :data="data"></slot>
                <tr v-if="!data.list || data.list.length < 1">
                    <td colspan="100" class="nodata">
                        <div class="tc">
                            <p class="f14">
                                未找到数据
                                <i class="el-icon-chat-dot-round f24"></i>
                            </p>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <slot
                        name="foot"
                        :total="{'ctotal': data.list.length, 'total': data.total, 'selcount': fetchSel().length, 'count': data.count}"
                ></slot>
                <tr v-if="data.total">
                    <td colspan="100">
                        <div class="pagebar tr">
                            <v-pagebar
                                    :total="data.total"
                                    :totalPage="data.totalpage"
                                    :page="filter.page"
                                    :pageSize="filter.pagesize"
                                    @pageChange="pageChange"
                                    @pageSize="pageSizeChang"
                            ></v-pagebar>
                        </div>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <div class="dis20"></div>
        <!-- end table list -->
    </div>
</template>

<script>
  export default {
    name: "sedlist",
    props: [
      "api",
      "params",
      "stype",
      "cols",
      "hideTool",
      "hidSearch",
      "cards",
      "dataR",
      "dataList"
    ],
    data() {
      return {
        filter: {
          search_type: "",
          keyword: "",
          orderby: "",
          page: 1,
          pagesize: 20
        },
        data: {
          totalpage: 0,
          total: 0,
          count: {},
          list: []
        },
        searchOpen: true,
        loadingStatus: false
      };
    },
    created() {
      if (this.params) {
        this.filter.orderby = this.params.orderby || "";
      }
      if (this.api) {
        this.fetchData();
      } else if (this.dataR) {
        this.data.list = this.dataR.data.children || [this.dataR.data];
      } else {
        this.data.list = this.dataList;
      }
    },
    watch: {
      api: {
        handler(newValue, oldValue) {
          this.fetchData();
        }
      },
      params: {
        handler(newValue, oldValue) {
          this.fetchData();
        },
        deep: true
      },
      dataR: {
        handler(newValue, oldValue) {
          this.data.list = this.dataR.data.children || [this.dataR.data];
        },
        deep: true
      }
    },
    methods: {
      getData() {
        return this.data;
      },
      fetchData(page) {
        // 列表数据为传递，而非请求，刷新时请求左侧树状图数据
        if (!this.api) {
          this.$parent.getDepart();
          return;
        }
        let that = this;
        let params = {};

        if (this.params) {
          for (let p in this.params) {
            if (this.params[p]) {
              params[p] = this.params[p];
            }
          }
        }
        for (let p in this.filter) {
          if (this.filter[p]) {
            params[p] = this.filter[p];
          }
        }
        if (params.hidePage) {
          delete params["page"];
          delete params["pagesize"];
          delete params["hidePage"];
        }
        this.loadingStatus = true;
        this.data.list = [];
        this.$api.get(this.api, params).then(
            res => {
              this.loadingStatus = false;
              if (res.status === 1 && res.data) {
                this.data.total = res.data.total || res.total || 0;
                this.data.totalpage = res.data.totalpage || res.totalpage || 0;
                this.data.count = res.data.amount || res.amount || {};
                if (res.data.hasOwnProperty("list")) {
                  this.data.list = res.data.list || [];
                } else {
                  let arr = []
                  for (let i in res.data) {
                    let o = {};
                    o['region'] = res.data[i];
                    arr.push(o)
                  }
                  for(let k = 0; k < arr.length; k++){
                    // console.log(k)
                    arr[k].region.nodes.push({})
                  }
                  // console.log(arr)
                  this.data.list = arr || [];
                }
                // this.data.list.map(function(item, index) {
                //   that.$set(item, "choose", false);
                // });
                // console.log(this.data.list)
                // 抛出data完整对象，以便父组件使用
                this.$emit("afterFetchData", this.data);
              }
            },
            () => {
              this.loadingStatus = false;
            }
        ).catch((e)=>{
          // cache.set('isMaster',false)
          this.$router.push({ path: "/member/master" });
        });
      },
      search() {
        this.filter.page = 1;
        this.fetchData();
      },
      setFilter(field, val, reload = true) {
        this.filter[field] = val;
        if (reload) {
          this.fetchData();
        }
      },
      setOrderby(field) {
        let s = "|";
        let f = (this.filter.orderby || s).split(s);
        f[0] = field;
        f[1] = f[1] && f[1] === "desc" ? "asc" : "desc";
        this.setFilter("orderby", f.join(s));
      },
      pageChange(val) {
        this.setFilter("page", val);
      },
      pageSizeChang(val) {
        this.setFilter("page", 1, false);
        this.setFilter("pagesize", val);
      },
      selAll(e) {
        let checked = e.target.checked;
        this.data.list.map(function(item) {
          item.choose = checked;
        });
      },
      fetchSel(field = "id") {
        let res = [];
        let fields = field.split(",");
        this.data.list.forEach(item => {
          if (item.choose) {
            if (fields.length === 1) {
              res.push(item[field]);
            } else {
              let t = {};
              fields.forEach(f => {
                t[f] = item[f] ? item[f] : "";
              });
              res.push(t);
            }
          }
        });
        return res;
      }
    }
  };
</script>
<style scoped lang="scss">
    .inlistbox {
        height: 100%;
    }
    .inlistbox .list-tools {
        padding: 20px 0 20px 0;
    }
    .inlistbox .list-body {
        min-height: 60px;
        position: relative;
        overflow: auto;
    }
    .total .inlistbox .list-body {
        border-right: 1px solid #efefef;
    }
    .keyword {
        /deep/ input {
            height: 32px;
            line-height: 32px;
        }
    }
    .list-tools-form {
        .el-button--mini,
        .el-button--mini.is-round {
            padding: 9px 15px;
        }
    }
</style>